{extend name="base" /}
{block name="body"}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">后台菜单</li>
            <li class=""><a href="{:url('admin/menu/add')}">添加菜单</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width: 30px;">ID</th>
                        <th style="width: 30px;">排序</th>
                        <th style="width: 30px;">展开</th>
                        <th>菜单名称</th>
                        <th>控制器方法</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                   <!-- {neq name="vo.pid" value="0"}style="display: none;"{/neq} -->
                    {foreach name="admin_menu_level_list" item="vo"}
                    <tr class="menu-tr" id="{$vo.id}" pid="{$vo.pid}" {neq name="vo.pid" value="0"}style="display: none;"{/neq}>
                        <td>{$vo.id}</td>
                        <td>{$vo.sort}</td>
                        <td style="cursor: pointer;" onclick="openOrClose(this,'{$vo.id}')">
                            {php}
                                if($vo['pid']==0){
                                    echo '+';
                                }
                            {/php}
                        </td>
                        <td>{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.title}</td>
                        <td>{$vo.name}</td>
                        <td>{php}echo $vo['status']==1 ? '显示' : '隐藏';{/php}</td>
                        <td>
                            {lt name="vo.level" value="3"}
                                <a href="{:url('admin/menu/add',['pid'=>$vo['id']])}" class="layui-btn layui-btn-mini">添加子菜单</a>
                            {/lt} 
                            <a href="{:url('admin/menu/edit',['id'=>$vo['id']])}" class="layui-btn layui-btn-normal layui-btn-mini">编辑</a>
                            <a href="{:url('admin/menu/delete',['id'=>$vo['id']])}" class="layui-btn layui-btn-danger layui-btn-mini ajax-delete">删除</a>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    // 展开或关闭
    function openOrClose(e, id) {
        var fhHtml = e.innerHTML.trim();
        if (fhHtml == "+") {
            e.innerHTML = "-";
            toggleMenu(id, "table-row"); // 展开
        } else if (fhHtml == "-") {
            e.innerHTML = "+";
            toggleMenu(id, "none"); // 关闭
        }
    }

    // 通用菜单切换函数
    function toggleMenu(id, displayStyle) {
        var trElements = document.querySelectorAll('.menu-tr');
        var zids = [];

        // 第一轮处理：直接子菜单
        for (var i = 0; i < trElements.length; i++) {
            var pid = trElements[i].getAttribute('pid');
            if (pid == id) {
                trElements[i].style.display = displayStyle;
                zids.push(trElements[i].getAttribute('id'));
            }
        }

        // 第二轮处理：孙子菜单
        for (var i = 0; i < trElements.length; i++) {
            var pid = trElements[i].getAttribute('pid');
            if (zids.includes(pid)) {
                trElements[i].style.display = displayStyle;
            }
        }
    }
</script>
{/block}